import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  Text,
  ScrollView,
  TextInput,
  Button
} from 'react-native'

import NavBar from '../../../../../components/PublicHeader';
import getStorageValue from '../../../../../utils/getStorageValue';
import fetchWebApi from '../../../../../public/WebApi/fetchBase';
import Layer from '../../../../../utils/Layer';
import {
  Constant
} from '../../../../../public/js/constant';
import {
  POST_APPCARD_ADD
} from '../../../../../public/WebApi/myInfoDataInterface/userInfoListApi';

export default class addBankCards extends Component {
  constructor(props) {
    super(props)
    this.state = {
      buttonaddBank: true,
      cardNum: '',

      bankCardList: [
        {
          title: "卡类型",
          item: "中国建设银行  储蓄卡",
        },
        {
          title: "手机号",
          item: "113123424356464",
        },
        {
          title: "支行",
          item: "湖南麓谷支行",
        }
      ],
    };
  }

  componentDidMount = () => {

  }

  //添加银行卡
  async postAppcard() {
    const {
      cardNum
    } = this.state
    const res = await fetchWebApi(POST_APPCARD_ADD,
      {
        token: await getStorageValue(Constant.TOKEN),
        cardType: 4,
        cardNum: cardNum
      }, 'POST')
    if (res.status = 200) {
      Layer.showMsg('添加成功')
    } else {
      Layer.showMsg("添加失败")
      return
    }
  }

  //验证银行卡
  onChangeText(value) {
    let reg = /^(.{4})(?:\d+)(.{4})$/
    let bankAccount = '6212268202014638666'
    if (reg.test(value)) {
      this.setState({
        cardNum: value,
        buttonaddBank: false
      })
    } else {
      this.setState({ buttonaddBank: true })
      Layer.showMsg('请输入正确的银行卡号')
      return
    }
  }


  render() {
    const {
      bankCardList,
      headerRightImage,
      topTitle,
      buttonaddBank,
    } = this.state
    {/* 用户本人的银行卡信息 */ }
    const BankCardDetailsDisplay =
      <>
        <View style={styles.bankCardDetails}>
          {bankCardList.map((item, index) => (
            <View style={styles.item} key={index}>
              <Text style={styles.itemTitle}>{item.title}</Text>
              <Text style={styles.itemTitle}>{item.item}</Text>
            </View>
          ))}
        </View>
        <Text style={styles.reminder}>如果信息有误，可轻触进行修改。</Text>
      </>
    return (
      <View style={styles.padlrWarper}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          rightImage={headerRightImage}
          title={topTitle}
          titleColor={"#333"}
        />
        <ScrollView>
          <View style={styles.padlr}>
            {/* 提示语 */}
            <View style={styles.textPrompt}>
              <Text style={styles.textPromptTitle}>添加银行卡</Text>
              <Text style={styles.text}>请绑定持卡本人的银行卡</Text>
            </View>
            <View>
              <Text style={styles.cardNumbertoAdd}>输入卡号添加</Text>
              {/* 输入框 */}
              <View style={styles.addBankCardsInput}>
                <TextInput
                  placeholder='点击输入本人的银行卡号'
                  style={styles.addBankCardsInput}
                  onEndEditing={(value) => {
                    this.onChangeText(value.nativeEvent.text)
                  }}
                />
                {/* 用户本人的银行卡信息 */}
                {!buttonaddBank ? BankCardDetailsDisplay : null}
              </View>
              <Text style={styles.cardNumbertoAdd}>卡类型</Text>
              <View style={styles.addBankCardsInput}>
                <TextInput
                  placeholder='点击输入卡类型'
                  style={styles.addBankCardsInput}
                  onEndEditing={(value) => {
                    this.onChangeText(value.nativeEvent.text)
                  }}
                />
                {/* 用户本人的银行卡信息 */}
                {!buttonaddBank ? BankCardDetailsDisplay : null}
              </View>
              <Text style={styles.cardNumbertoAdd}>手机号</Text>
              <View style={styles.addBankCardsInput}>
                <TextInput
                  placeholder='点击输入手机号'
                  style={styles.addBankCardsInput}
                  onEndEditing={(value) => {
                    this.onChangeText(value.nativeEvent.text)
                  }}
                />
                {/* 用户本人的银行卡信息 */}
                {!buttonaddBank ? BankCardDetailsDisplay : null}
              </View>
              <Text style={styles.cardNumbertoAdd}>支行</Text>
              <View style={styles.addBankCardsInput}>
                <TextInput
                  placeholder='点击输入支行'
                  style={styles.addBankCardsInput}
                  onEndEditing={(value) => {
                    this.onChangeText(value.nativeEvent.text)
                  }}
                />
                {/* 用户本人的银行卡信息 */}
                {!buttonaddBank ? BankCardDetailsDisplay : null}
              </View>

              <Button
                title="提交卡号"
                style={styles.buttonaddBank}
                disabled={buttonaddBank}
                onPress={() => {
                  this.postAppcard()
                  this.props.navigation.state.params.refresh()
                  this.props.navigation.push('addComplete')
                }}
              />
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 32,
    backgroundColor: 'transparent'
  },
  padlrWarper: {
    backgroundColor: "#fff",
    flex: 1,
  },
  padlr: {
    paddingLeft: 25,
    paddingRight: 25,
    paddingTop: 10,
  },
  textPrompt: {
    flexDirection: "column",
    alignItems: "center",
    marginBottom: 50
  },
  textPromptTitle: {
    color: "#333",
    fontSize: 20,
    marginBottom: 10
  },
  text: {
    color: "#333",
    fontSize: 13
  },
  cardNumbertoAdd: {
    fontSize: 16,
    color: "#333"
  },
  addBankCardsInput: {
    marginBottom: 20,
    marginTop: 30
  },
  addBankCardsInput: {
    width: "100%",
    height: 40,
    fontSize: 13,
    borderWidth: 1,
    borderColor: "#E2E2E2",
    borderRadius: 6,
  },
  bankCardDetails: {
    width: "100%",
    marginTop: 10,
    borderWidth: 1,
    borderColor: "#E2E2E2",
    borderRadius: 6,
  },
  item: {
    height: 40,
    paddingLeft: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#E2E2E2",
    flexDirection: "row",
    alignItems: "center"
  },
  itemTitle: {
    marginRight: 10,
    color: "#333",
    fontSize: 15
  },
  reminder: {
    color: "#5b5b5b",
    fontSize: 12,
    marginTop: 5
  },
  buttonaddBank: {
    fontWeight: "700",
    borderRadius: 10
  },

})